<!--
    @作者：814878176@qq.com
    @时间：2020-04-06
    @描述：我的记录 - 公共页面内容
	@使用："path": "@/pages/activityTwo/recordCom"
 -->
<template>
	<view>
		<!-- 要有一张背景图定位在底部的 -->
		<image class="uni-image img-bg" mode="widthFix" src="/static/common/record_bg_1.png" />
		<view class="content-wrapper">
			<!-- 主题标题图 -->
			<view class="banner">
				<image class="uni-image" mode="widthFix" src="/static/activityTwo/banner.png" />
			</view>
			<view class="record-wrapper">
				<image class="uni-image img-bg" mode="widthFix" src="/static/common/record_bg_2.png" />
				<scroll-view scroll-y="true" scroll-x="true" class="record-scroll-view scroll-Y scroll-X">
					<view class="title-img">
						<image class="uni-image" mode="widthFix" src="/static/common/recod_title.png" />
					</view>
					<view class="record-list">
						<view class="item" v-for="(item,index) in recordLists" :key="index">
							<text class="text">
								{{item.created_at}}
							</text>
							<text class="text">
								{{item.action}}
							</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="uni-p-b-150"></view>
		</view>
		<tabBar :rootPath="rootPath" :pagePath="'/record'"></tabBar>
		<view v-if="!showPage" class="bank-wrapper"></view>
	</view>
</template>

<script>
	export default {
		props: {
			rootPath: null
		},
		data() {
			return {
				showPage: false,
				recordLists: []
			}
		},
		mounted() {
			this.getRecord();
			setTimeout(()=>{
				this.showPage = true;
			},500)
		},
		methods: {
			getRecord() {
				this.$request({
						 method: "GET",
						 url: PATHAPI + '/log',
						 data: {},
						 success: (res) => {
							 console.log(res.data);
							 if(res.data.status == 'success'){
								 this.recordLists = res.data.data.lists;		
							 }else{
								 // alert(res.data.message);
							 }
						 },
						 fail: (res) => {
							 console.log(2222)
						 }
				});
			}
		}
	}
</script>
<style lang="stylus" scoped>
	@import "../../common/css/var.styl"   
	.content-wrapper {
		position: absolute;
		top: 0;
		width: 100%;
		text-align: center;
		.banner {
			position: relative;
			z-index: 9;
		}
		.record-wrapper {
			position: relative;
			display: inline-block;
			width: calc(100% - 40upx);
			margin-top: -80upx;
			// 背景边框
			.img-bg {
				width: 100%;
			}
			.record-scroll-view {
				position: absolute;
				top: 0;
				height: 100%;
				padding: 40upx 10upx;
				box-sizing: border-box;
				// 记录标题
				.title-img {
					position: relative;
					z-index: 99;
					margin: 10upx auto;
					.uni-image {
						width: 296upx;
					}
				}
				// 记录列表
				.record-list {
					padding: 20upx 30upx;
					.item {
						padding: 20upx 50upx;
						text-align: left;
						border-bottom: dashed 3upx #527938;
						.text {
							display: block;
							line-height: 36upx;
							color: #2b2e0d;
							font-size: 24upx;
						}
					}
					
				}
			}
		}
	}
</style>